<template>
  <div class="container">
      <!-- 输入搜索 -->
      <el-form ref="form" :model="form" label-width="80px">
         <el-form-item label="输入搜索"  >
             <el-input v-model="form.name"  @change="keyfindfun" placeholder="输入课程ID"></el-input>
        </el-form-item>

    </el-form>
    <!-- 开始日期 -->
       <span style="font-weight:900">上次消费时间</span>
        <div class="block">
         
         <span class="demonstration">开始日期</span>
           <el-date-picker
          v-model="value1"
         type="date"
         placeholder="选择日期">
         </el-date-picker>
         <span class="demonstration">结束日期</span>
           <el-date-picker
          v-model="value2"
         type="date"
         placeholder="选择日期">
         </el-date-picker>
       </div>
       <el-row>
             <el-button type="primary">查询</el-button>
               <el-button plain @click="resetfun">重置</el-button>
       </el-row>
      
       <div class="xiala">
           <el-row class="block-col-2">
           <el-col :span="12">
   
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    高级筛选<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-radio-group v-model="radio">
                        <el-checkbox :label="3">上传</el-checkbox><br/>
                        <el-checkbox :label="6">下架</el-checkbox><br/>
                        <el-checkbox :label="9">上传人</el-checkbox><br/>
                        <el-checkbox :label="12">课程名称</el-checkbox>
                    </el-radio-group>
                    
                </el-dropdown-menu>
                </el-dropdown>
      </el-col>
           </el-row>
       </div>
  </div>
</template>

<script>
export default {
  data(){
      return {
          form:{
              name:'',
             
          },
          radio:4,
          pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      }
  },
  methods: {
    keyfindfun(){
      this.$emit('parentSearch',this.form.name)
    },
    resetfun(){
     this.$emit('resetParent')
    }
       
  }
}
</script>

<style  lang="less" scoped>
    .container{
        background: white;
        margin-left:10px ;
        margin-right: 10px;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left:10px ;
        position: relative;
        .xiala{
            width: 150px;
          
            margin-left: 20px;
        }
        .el-dropdown-link {
                    cursor: pointer;
                    color: #409EFF;
         }
         .el-form-item{
             font-weight: 900px;
         }
         .el-radio-group{
             width: 150px;
             height: 200px;
             padding:10px;
             box-sizing: border-box;
         }.el-checkbox {
            float: left;
            margin: 0 auto;
         }
        .el-dropdown-menu--mini{
            width: 100px;
                   height: 200px;
                   display: flex;
                   flex-direction: column;
                   justify-content: flex-start;
                   align-items: center;
        }
        
        .demonstration {

                   font-size: 14px;
        }
             
        .block{
            
            margin-left: 20px;
            .demonstration{
                margin: 10px;
             
            }
        }
        .el-form{
            width: 100px;
              height: 40px;
                margin-right: 200px;
                margin-top: 10px;
        }
        .el-form-item--mini{
             
           
              .el-form-item__label{
                  color: black;
                  font-size: 16px;
                  font-weight: 800px !important;
                  
                  
              }
              .el-input--mini{
                    width: 100px !important;
                    height: 40px !important;
                    color: black;
              
        }
        
        
     
    }
    .el-button--primary{
        margin: 10px;
        
    }}
</style>